// 配置
@import 'common'

// 定制
// @import 'customize'

// 助手类
@import 'helpers'

// 页头
.header {
  height: 44px;
  line-height: 44px;
  text-align: center;

  a.title {
    display: inline-block;
    size: 127px 24px;
    color: #333;
    font-size: 18px;
    background: url('/static/img/logo.png') no-repeat
    background-size: 127px 24px;
    margin-top: 10px;
    margin-left: 52px;
    cursor: pointer;
  }

  .actions {
    position: relative;
    float: right;
    color: #333;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    top: 2px;
    right: 12px;

    span {
      margin-right: 5px;
    }
  }
}

.categories {
  background: #F4F4F4;

  nav {
    padding: 7px 10px;
    font-size: 0;
    line-height: 1.5;
    overflow: hidden;
    height: auto;

    a {
      display: inline-block;
      font-size: 14px;
      padding: 4px 11px;
      border-radius: 2px;
      margin-bottom: 2px;
      cursor: pointer;
      color: extra-light-silver;

      &.active {
        color: #FFF;
        background: orange;
      }
    }
  }
}

.rec-apps {
  margin-top: 0;

  .weui-panel__hd {
    font-size: 14px;

    .tit {
      display: inline-block;
      padding-left: 25px;
      background: url('/static/img/star.png') no-repeat 0 2px;
      background-size: 15px 15px;
    }

    &:after {
      border: none;
    }
  }
}

// 精品推荐
.top-apps {
  .weui-grid {
    width: 25%;
    padding: 15px 10px;
  }

  .weui-grid__icon {
    size: 40px;
  }

  .weui-grid__label {
    font-size: 12px;
  }
}

// 程序列表
.app-list {
  .app-list__item {
    position: relative;

    &:before {
      content: ' ';
      absolute: left 15px top right;
      border-top: 1px solid #E5E5E5;
      color: #E5E5E5;
      transform-origin: 0 0;
      transform: scaleY(0.5);
    }

    &:first-child {
      &:before {
        display: none;
      }
    }
  }

  .weui-media-box__title {
    font-size: 15px;
  }

  .weui-media-box__desc {
    font-size: 12px;
    margin-top: 5px;
  }

  .actions {
    margin-left: 2.5em;
    size: 28px;
    border: 1px solid #ECECEC;
    border-radius: 4px;

    .icon-qrcode {
      display: block;
      size: 100%;
      background: url('/static/img/icons/qrcode.png') no-repeat center;
      background-size: 28px 28px;
    }
  }

  .qrcode {
    background: #F4F4F4;
    text-align: center;
    padding: 20px 0;

    img {
      width: 128px;
    }

    .desc {
      margin-top: 10px;
      font-size: 12px;
      color: extra-light-silver;
    }
  }
}

// 页脚
.footer {
  padding: 20px;
}
